@import '../../../../../assets/styles/mixin.less';
.list {
  .item {
    width: 100%;
    height: 320rpx;
    margin-bottom: 24rpx;
    background-color: #ffffff;
    border-radius: 8rpx;
    box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(33,114,237,0.15);
    .course-main {
      position: relative;
      width: 100%;
      height: 220rpx;
      display: flex;
      flex-direction: column;
      line-height: 1;
      padding: 0 32rpx;
      box-sizing: border-box;
      .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #111111;
        line-height: 88rpx;
        .no-wrap();
      }
      .content {
        display: flex;
        font-size: 28rpx;
        color: #666666;
        .column {
          flex: 0 0 50%;
          width: 50%;
          line-height: 52rpx;
          .text {
            width: 100%;
            .no-wrap();
          }
        }
      }
      .go-details {
        position: absolute;
        right: 20rpx;
        top: 50%;
        display: flex;
        align-items: center;
        .icon-you {
          font-size: 28rpx;
          color: rgba(33, 114, 237, 0.3);
        }
      }
    }
    .hover-course-main {
      background-color: #F9FBFF;
    }
    .course-btn {
      display: flex;
      height: 100rpx;
      border-top: 1rpx solid #EEEEEE;
      .btn {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon-box {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 32rpx;
          height: 32rpx;
          text-align: center;
          border-radius: 50%;
          .icon {
            font-size: 24rpx;
            color: #ffffff;
          }
        }
        .yellow {
          background-color: #FFCE66;
        }
        .blue {
          background-color: #2172ED;
        }
        .name {
          margin-left: 22rpx;
          font-size: 28rpx;
          color: #222222;
        }
      }
      .border-gray {
        border-right: 1rpx solid #EEEEEE;
      }
      .hover-btn {
        background-color: #F9FBFF;
      }
    }
  }
}